<template>
  <div style="background-color:#f1f6f5">
    <div>
      <img src="../../assets/img/socialContact/social_contact.jpg" style="width:100%" alt="" srcset="">
    </div>
    <div class="main_mall" v-show="showContent" v-if="false">
      <div class="classify_mask" @click.stop="showMask=false" v-show="showMask">
        <div class="classify_modal" @click.stop="">
          <div style="padding-bottom: 5px;color: #666;">分类</div>
          <ul>
            <li v-for="item in classifyList" @click="pushPath('/productList/'+JSON.stringify({id:item.id,level:1}))">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="main_mall_search">
        <div class="top_search_online" @click="showMask=true">
          <span style="font-size:26px;display:block"><i class="ion-navicon"></i></span>
          <!-- <span style="font-size:12px;display:block">分类</span> -->
        </div>
        <div class="top_search_input">
          <i class="ion-ios-search-strong"></i>
          <form action="">
            <input type="search" name="search" @keypress="selectGoods" onsearch="" v-model="searchValue" @focus="showSelectDetail=true;"/>
          </form>
        </div>
        <div class="top_search_text"  @click="select">搜索</div>
      </div>
      <div class="main_mall_box" ref="mallBox">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in bannerList" :key="index">
            <img :src="image"/>
          </van-swipe-item>
        </van-swipe>
        <div class="head_line">
          <span style="width: 20%;"><img src="../../assets/img/shopMain/head_line.png" class="not_save_img" alt=""></span>
          <div style="width: 79%;height: 21px;" v-if="showContent">
            <van-notice-bar text="事业帮 ☆ 帮客商城已经强势开放，现诚招各项商家入驻，共同打造新生态商业联盟！！！"/>
          </div>
          <!-- <div v-if="bulletin.length>0"  style="width: 73%;margin: 0;height: 21px; line-height: 24px;">
            <van-swipe :autoplay="3000" :show-indicators="false" vertical style="width: 100%;margin: 0;height: 21px; line-height: 24px;">
              <van-swipe-item style="width:100%" v-for="(info,index) in bulletin" :key="index">
                <div class="horn_icon text_hide"  @click="showNews(info)">{{info.bulletinTitle}}</div>
              </van-swipe-item> 
            </van-swipe>
          </div> -->
          
        </div>
        <img src="http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/abcdb0325fd8439bad174ec83f7f7b84.jpg" alt="" srcset="" style="width:96%;margin-left:2%;margin-bottom: 2vw;" class="not_save_img">
        <ul class="mall_subarea">
          <!-- <li v-for="item in subarea">
            <img :src="item.img" alt="" v-lazy="item.img" srcset="">
          </li> -->
          <li @click="pushPath('/luxuryCarArea')"><img :src="subarea[0].img" class="not_save_img" alt="" srcset=""></li>
          <li @click="pushPath('/luxuryCarArea')"><img :src="subarea[1].img" class="not_save_img" alt="" srcset=""></li>
          <li @click="pushPath('/luxuryCarArea')"><img :src="subarea[2].img" class="not_save_img" alt="" srcset=""></li>
          <li @click="pushPath('/luxuryCarArea')"><img :src="subarea[3].img" class="not_save_img" alt="" srcset=""></li>
          <li @click="pushPath('/productList/'+JSON.stringify({id:subarea[4].id,level:1}))"><img :src="subarea[4].img" class="not_save_img" alt="" srcset=""></li>
          <li @click="pushPath('/productList/'+JSON.stringify({id:subarea[5].id,level:1}))"><img :src="subarea[5].img" class="not_save_img" alt="" srcset=""></li>
          <li @click="pushPath('/productList/'+JSON.stringify({id:subarea[6].id,level:1}))"><img :src="subarea[6].img" class="not_save_img" alt="" srcset=""></li>
          <li @click="pushPath('/productList/'+JSON.stringify({id:subarea[7].id,level:1}))"><img :src="subarea[7].img" class="not_save_img" alt="" srcset=""></li>
        </ul>
        <div class="mall_classify">
          <div @click="pushPath('/productList/'+JSON.stringify({id:'084bdc5d5bdf47b0a258ab2587cafe2f',level:1}))">
            <img src="http://7xroyt.com1.z0.glb.clouddn.com/base/SysNews/44a6928f3b3b4235ab8910dbcd184e91.png" class="not_save_img" alt="">
          </div>
          <ul class="mall_classify_product">
            <li v-for="item in classify1" @click="pushPath('/productDetails/'+item.id)">
              <div><img :src="item.goodsImg" class="not_save_img" alt="" srcset=""></div>
              <div class="mall_product_name">
                {{item.goodsName}}
              </div>
              <div class="mall_product_sales">已售<span>{{item.goodsSale}}</span>件</div>
              <!-- <div class="mall_product_price_BCC">帮劵：699</div> -->
            </li>
          </ul>
        </div>
        <div class="mall_classify">
          <div @click="pushPath('/productList/'+JSON.stringify({id:'1e3d3112c15a424e857002adf477c7ba',level:1}))">
            <img src="http://7xroyt.com1.z0.glb.clouddn.com/base/SysNews/35022a26efdd47098f0e35d83a57b11c.png" class="not_save_img" alt="">
          </div>
          <ul class="mall_classify_product">
            <li v-for="item in classify2" @click="pushPath('/productDetails/'+item.id)">
              <div><img :src="item.goodsImg" class="not_save_img" alt="" srcset=""></div>
              <div class="mall_product_name">
                {{item.goodsName}}
              </div>
              <div class="mall_product_sales">已售<span>{{item.goodsSale}}</span>件</div>
              <!-- <div class="mall_product_price_RMB">RMB：699</div>
              <div class="mall_product_price_BCC">帮劵：699</div> -->
            </li>
          </ul>
        </div>
        <div class="mall_classify">
          <div @click="pushPath('/productList/'+JSON.stringify({id:'ffd1d8f6318b4408afe784cd018f4ea9',level:1}))">
            <img src="http://7xroyt.com1.z0.glb.clouddn.com/base/SysNews/f5b7dd7ed71b4157a5d2871c2e863dbf.png" class="not_save_img" alt="">
          </div>
          <ul class="mall_classify_product">
            <li v-for="item in classify3" @click="pushPath('/productDetails/'+item.id)">
              <div><img :src="item.goodsImg" class="not_save_img" alt="" srcset=""></div>
              <div class="mall_product_name">
                {{item.goodsName}}
              </div>
              <div class="mall_product_sales">已售<span>{{item.goodsSale}}</span>件</div>
              <!-- <div class="mall_product_price_RMB">RMB：699</div>
              <div class="mall_product_price_BCC">帮劵：699</div> -->
            </li>
          </ul>
        </div>
        <div class="mall_classify">
          <div @click="pushPath('/productList/'+JSON.stringify({id:'1f8fee17d78c425c93f4f4b4e360ee07',level:1}))">
            <img src="http://7xroyt.com1.z0.glb.clouddn.com/base/SysNews/5ef4718e9047410596a6bb5ff3012800.png" class="not_save_img" alt="">
          </div>
          <ul class="mall_classify_product">
            <li v-for="item in classify4" @click="pushPath('/productDetails/'+item.id)">
              <div><img :src="item.goodsImg" class="not_save_img" alt="" srcset=""></div>
              <div class="mall_product_name">
                {{item.goodsName}}
              </div>
              <div class="mall_product_sales">已售<span>{{item.goodsSale}}</span>件</div>
              <!-- <div class="mall_product_price_RMB">RMB：699</div>
              <div class="mall_product_price_BCC">帮劵：699</div> -->
            </li>
          </ul>
        </div>
        <div class="mall_classify">
          <div @click="pushPath('/productList/'+JSON.stringify({id:'ad3074b4eeff451d9150fdc6a008282e',level:1}))">
            <img src="http://7xroyt.com1.z0.glb.clouddn.com/base/SysNews/e49f3168f2b94e919d632f3590b00b52.png" class="not_save_img" alt="">
          </div>
          <ul class="mall_classify_product">
            <li v-for="item in classify5" @click="pushPath('/productDetails/'+item.id)">
              <div><img :src="item.goodsImg" class="not_save_img" alt="" srcset=""></div>
              <div class="mall_product_name">
                {{item.goodsName}}
              </div>
              <div class="mall_product_sales">已售<span>{{item.goodsSale}}</span>件</div>
              <!-- <div class="mall_product_price_RMB">RMB：699</div>
              <div class="mall_product_price_BCC">帮劵：699</div> -->
            </li>
          </ul>
        </div>
        <div class="mall_classify">
          <div @click="pushPath('/productList/'+JSON.stringify({id:'447280b5d64c4d4383ba2007388d392b',level:1}))">
            <img src="http://7xroyt.com1.z0.glb.clouddn.com/base/SysNews/fe59003c940740d8ae79160c1b6afbbc.png" class="not_save_img" alt="">
          </div>
          <ul class="mall_classify_product">
            <li v-for="item in classify6" @click="pushPath('/productDetails/'+item.id)">
              <div><img :src="item.goodsImg" class="not_save_img" alt="" srcset=""></div>
              <div class="mall_product_name">
                {{item.goodsName}}
              </div>
              <div class="mall_product_sales">已售<span>{{item.goodsSale}}</span>件</div>
              <!-- <div class="mall_product_price_RMB">RMB：699</div>
              <div class="mall_product_price_BCC">帮劵：699</div> -->
            </li>
          </ul>
        </div>
        <div class="mall_classify">
          <div @click="pushPath('/productList/'+JSON.stringify({id:'6fb197c292844bea940015158238d4f8',level:1}))">
            <img src="http://7xroyt.com1.z0.glb.clouddn.com/base/SysNews/e97c3a8898de4fdfb6ba02b94e67162a.png" class="not_save_img" alt="">
          </div>
          <ul class="mall_classify_product">
            <li v-for="item in classify7" @click="pushPath('/productDetails/'+item.id)">
              <div><img :src="item.goodsImg" class="not_save_img" alt="" srcset=""></div>
              <div class="mall_product_name">
                {{item.goodsName}}
              </div>
              <div class="mall_product_sales">已售<span>{{item.goodsSale}}</span>件</div>
              <!-- <div class="mall_product_price_RMB">RMB：699</div>
              <div class="mall_product_price_BCC">帮劵：699</div> -->
            </li>
          </ul>
        </div>

        <div class="characteristic_recommendation">
          <div class="characteristic_recommendation_title">特色推荐</div>
          <van-list v-model="loading" :finished="finished" @load="loadMore" :offset="1">
            <ul v-show="allProduct.length>0">
              <li v-for="item in allProduct" @click="pushPath('/productDetails/'+item.id)">
                <div class="characteristic_recommendation_img_box"><img :src="item.goodsImg" class="not_save_img" alt="" srcset=""></div>
                <div class="mall_product_name">
                  {{item.goodsName}}
                </div>
                <div class="mall_product_sales">已售<span>{{item.goodsSale}}</span>件</div>
              </li>
              <li class="no_more_data" style="width:100%;margin: 10px 0;padding: 10px 0;" v-show="finished">已经到底了</li>
            </ul>
          </van-list>
        </div>
      </div>
      <mt-popup class="news_popup_style"
        v-model="newsPopupVisible"
        position="top">
        <div>
          <h4>{{news.bulletinTitle}}</h4>
          <p v-html="news.bulletinContext"></p>
          <span>{{news.createTimeString}}</span>
        </div>
      </mt-popup>  
      
      <div v-show="showGoTopBtn" class="go_top" @click.stop="goTop">
        <van-icon style="background: #fff;border-radius: 50%;color: #25a3fe;" name="upgrade" />
      </div>
    </div>
    
  </div>
</div>
  
</template>
<script>
import { Toast  } from "vant";

export default {
  name: "mall",
  data() {
    return {
      showGoTopBtn:false,

      newsPopupVisible:false,
      bulletin: [],
      news:{},
      bannerList: [],
      classifyList: [],
      subarea: [
        { img: "http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/8d6e4e52019a4dbdb5c3b97135750e49.jpg", id: "" },
        { img: "http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/dd6b1e697a504aeba37850a1b39f0156.jpg", id: "" },
        { img: "http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/923b8e54e1554629abfd73fe4b805bf0.jpg", id: "" },
        { img: "http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/910995b72a0f4fafa8cde3a5eab3a29c.png", id: "" },
        { img: "http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/a6434c70fa2a4a6eb5cf814adf3298f6.png", id: "084bdc5d5bdf47b0a258ab2587cafe2f" },
        { img: "http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/4a647deb747d4578b227216a3d2e1fec.png", id: "1e3d3112c15a424e857002adf477c7ba" },
        { img: "http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/8ed291980bc2422d88563aac21d3efba.png", id: "ffd1d8f6318b4408afe784cd018f4ea9" },
        { img: "http://7xroyt.com1.z0.glb.clouddn.com/base/MallBanner/72ec5675121f454a9a72c98db8d7dc5e.png", id: "447280b5d64c4d4383ba2007388d392b" }
      ],
      
      showContent: false,

      classify1:[],
      classify2:[],
      classify3:[],
      classify4:[],
      classify5:[],
      classify6:[],
      classify7:[],

      searchData:{
        pageNo:1,
        pageSize:20
      },
      allProduct:[],
      loading:false,
      finished:true,
      
      swiperOption: {
        direction: "vertical",
        autoplay: true,
        // effect : 'flip',
        loop: true,
        speed: 1500,
        autoplayDisableOnInteraction: false,
        observer: true,
        observeParents: true
      },
      msg:'',
      showMask:false
    };
  },
  components: {
  },
  created() {
    
  },
  watch:{
    // '$route' (to, from) {
    //   if(this.$refs.mallBox.scrollTop!=0){
    //     this.$store.commit("updateMallScrollTop", this.$refs.mallBox.scrollTop);
    //   }
    // }
  },
  computed: {
    searchValue: {
      get() {
        return this.$store.state.searchValue;  
      },
      set(newValue) {
        this.$store.state.searchValue = newValue
      }      
    }
  },
  activated(){
    this.$store.commit("updateNeedShowFooter", true);
    this.$store.commit("updateSelected", 1);
    if(this.bannerList.length==0){
      // this.selectMallIndexInfo();
      // this.selectIndexGoods();
      this.$store.state.searchValue = ''
    }
    setTimeout(()=>{
      // this.$refs.mallBox.scrollTop = this.$store.state.mallScrollTop;
    },0)
    
  },
  mounted() {
    // this.$refs.mallBox.addEventListener('scroll', this.showGoTop);
  },
  methods: {
    showGoTop(){
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      if(this.$refs.mallBox.scrollTop>h){
        this.showGoTopBtn = true;
      }else{
        this.showGoTopBtn = false;
      }
    },
    goTop(){
      this.$refs.mallBox.scrollTop = 0;
    },
    selectGoods(){
      if(event.keyCode=='13'){
        event.preventDefault();
        this.select()
      }
    },
    select() {
      if (this.searchValue == "") {
        Toast({
          message: "请输入您要搜索的内容",
          position: "bottom"
        });
      } else {
        this.$router.push(
          "/productList/" + JSON.stringify({id: "" })
        );
      }
    },
    selectMallIndexInfo() {
      this.$ajax(this.$api.selectMallIndexInfo).then(res => {
        if (res.code === 0) {
          if (res.data) {
            this.bannerList = res.data.banner; 
            this.bulletin = res.data.bulletin;
            this.classifyList = res.data.oneLm;
            this.showContent = true;
          }
        }
      });
    },
    selectIndexGoods() {
      this.$ajax(this.$api.selectIndexGoods).then(res => {
        // console.log(res)
        if (res.code === 0) {
          if (res.data) {
            this.classify1 = res.data.classify1;
            this.classify2 = res.data.classify2;
            this.classify3 = res.data.classify3;
            this.classify4 = res.data.classify4;
            this.classify5 = res.data.classify5;
            this.classify6 = res.data.classify6;
            this.classify7 = res.data.classify7;
          }
          this.$ajax(this.$api.selectMallGoodsList,this.searchData).then(res=>{
            if(res.code==0){
              this.allProduct = res.data.list;
              if(this.searchData.pageNo!=res.data.pageCount){
                this.finished = false;
              }
            }
          })
        }
      });
    },

    loadMore(){
      this.searchData.pageNo+=1;
      this.$ajax(this.$api.selectMallGoodsList,this.searchData).then(res=>{
        if(res.code==0){
          this.allProduct = this.allProduct.concat(res.data.list);
          this.loading = false;
          if(this.searchData.pageNo==res.data.pageCount){
            this.finished = true;            
          }
        }
      })
    },

    showClassify(){
      this.showMask=true;
    },
    closeMask(){
      this.showMask=false;
    },
    showNews(info){
      this.newsPopupVisible = true;
      this.news = info;
    },
  }
};
</script>
<style>
.classify_mask{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5555;
}
.classify_modal{
  background: #fff;
  width: 100%;
  margin: 44px 0;
  position: absolute;
  z-index: 6666;
  font-size: 14px;
  padding: 10px 3%;
  box-sizing: border-box;
}
.classify_modal ul{
  overflow: hidden;
}
.classify_modal li{
  float: left;
  margin: 5px;
  padding: 5px;
  border: 1px #ddd solid;
  border-radius: 4px;
  font-size: 12px;
  color: #25a3fe;
}
.news_popup_style{
  width: 90%;
  margin-top: 10%;
  border-radius: 4px;
  max-height: 80%;
  overflow-y: scroll;
}
.news_popup_style div{
  margin: 10px;
}
.news_popup_style h4{
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px #ddd solid;
}
.news_popup_style p{
  padding-top:10px ;
}
.news_popup_style span{
  display: block;
  padding: 10px 0 0;
  text-align: right;
  font-size: 12px;
  margin-top: 10px;
  border-top: 1px #ddd solid;
}

.main_mall_search {
  background-color: #25a3fe;
  display: flex;
  align-items: center;
  color: #fff;
  height: 44px;
  box-sizing: border-box;
}
.main_mall .select {
  height: 100%;
  width: 100%;
  z-index: 100;
  background: #fff;
  overflow: hidden;
  position: fixed;
}
.mall_selected_speciality {
  border-bottom: 2px #fff solid;
}

.top_search_online {
  text-align: center;
  width: 14%;
}

.top_search_input {
  box-shadow: 0 0 1px #999;
  border-radius: 5px;
  padding: 0;
  width: 82%;
  background: #fff;
  color: #666;
  display: flex;
  align-items: center;
  height: 30px;
  line-height: 30px;
}
.top_search_input form {
  width: 86%;
}
.top_search_input input {
  font-size: 14px;
  background-color: #fff;
  border: none;
  height: 26px;
  line-height: 26px;
  width: 100%;
  margin: 1px 0;
}

.top_search_input i {
  font-size: 20px;
  padding-left: 5%;
  width: 8%;
}

.top_search_text {
  width: 14%;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  padding: 0 1vw;
  color: #fff;
}

.top_search_text i {
  font-size: 28px;
}

.main_mall img {
  width: 100%;
}
.main_mall_box{
  position: absolute;
  width: 100%;
  top: 44px;
  bottom: 50px;
  overflow-y: auto;
  background-color: #fff;
}
.head_line {
  font-size: 14px;
  /* background: #eee; */
  margin: 5px 0;
  padding: 5px 2%;
  /* border-radius: 20px; */
  display: flex;
  flex-wrap: wrap;
  line-height: 20px;
}
.head_line div {
  margin-left: 1%;
}
.head_line .van-notice-bar{
  padding: 2px 5px;
  background-color: #fff;
  color:#333;
}
.head_line i {
  font-size: 16px;
  margin-right: 5px;
}
.horn_icon {
  height: 20px;
  line-height: 22px;
  color: #666;
  width: 100%;
}
.mall_subarea{
  overflow: hidden;
  margin: 0 2% 0;
}
.mall_subarea li{
  float: left;
  width: 23.25vw;
  margin-right: 1vw
}
.mall_subarea li:last-child{
  margin-right: 0;
}
.mall_subarea li:nth-child(1){
  width: 47.5vw;
  margin: 0 0.5vw 2vw 0;
}
.mall_subarea li:nth-child(2){
  width: 47.5vw;
  margin: 0 0 2vw 0.5vw;
}
.mall_subarea li:nth-child(3){
  width: 47.5vw;
  margin: 0 0.5vw 2vw 0;
}
.mall_subarea li:nth-child(4){
  width: 47.5vw;
  margin: 0 0 2vw 0.5vw;
}

.mall_classify{
  margin-top: 10px;
}
.mall_classify_product{
  margin: 2vw 2vw 0;
  display: -webkit-box;
  font-size: 14px;
  overflow: hidden;
}
.mall_classify_product li{
  width: 23.25vw;
  margin-right: 1vw ;
  font-size: 12px;
  line-height: 20px
}
.mall_product_name{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  color: #555;
  padding: 5px;
  font-size: 12px;
  line-height: 20px;
  height: 38px;
}
.mall_product_sales{
  color: #666;
  text-align: right;
  font-size: 12px;
  padding: 5px;
}
.mall_product_sales span{
  color: #dd4342;
  margin: 0 2px;
}
.mall_product_price_RMB{
  color: #dd4342;
}
.mall_product_price_BCC{
  color: #26a3ff;
}
.characteristic_recommendation_title{
  color: #444;
  padding: 15px;
  margin-top: 10px;
  text-align: center;
  background: #fff0fa;
}
.characteristic_recommendation ul{
  padding: 10px 2vw;
  overflow: hidden;
  background: #f5f5f5;
}
.characteristic_recommendation li{
  float: left;
  width: 47.5vw;
  margin-right: 1vw;
  margin-top: 5px;
  background: #fff;
}
.characteristic_recommendation_img_box{
  width: 47.5vw;
  height: 47.5vw;
  text-align: center;
  vertical-align: middle;
  line-height: 46vw;
}
.characteristic_recommendation_img_box img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  box-shadow: 0 0 0 1px #eee;
}
.characteristic_recommendation li:nth-of-type(2n){
  margin-right: 0;
}
.go_top{
  position: absolute;
  bottom: 120px;
  right: 20px;
  font-size: 30px;
}
</style>
